<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>请假类型管理</title>
    <script src="vue2_resource/vue@2.6.14.js"></script>
    <link rel="stylesheet" href="vue2_resource/index.css">
    <script src="vue2_resource/elementui.js"></script>
    <script src="vue2_resource/axios.min.js"></script>
    <script src="vue2_resource/axiosWrapper.js"></script>

    <style>
        body {
            background-color: #f0f2f5;
            padding: 20px;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        .el-card {
            margin-bottom: 20px;
        }

        .filter-section {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }

        .el-table {
            width: 100%;
            overflow-x: auto;
        }

        .el-table .cell {
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card>
        <div class="filter-section">
            <el-input
                    v-model="searchTypeName"
                    placeholder="搜索请假类型名称"
                    style="width: 200px;">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch" size="small">搜索</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="resetSearch" size="small">重置</el-button>
            <el-button type="success" icon="el-icon-plus" @click="openAddLeaveTypeDialog" size="small">添加请假类型</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleBatchDelete" size="small"
                       :disabled="selectedLeaveTypes.length === 0">批量删除
            </el-button>
        </div>
    </el-card>

    <el-card>
        <el-table :data="leaveTypes" style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="typeName" label="请假类型名称" width="150"></el-table-column>
            <el-table-column prop="description" label="请假类型描述" width="200"></el-table-column>
            <el-table-column prop="applicableConditions" label="适用条件" width="200"></el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="updatedAt" label="最后更新时间" width="180"></el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="openEditLeaveTypeDialog(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalLeaveTypes">
            </el-pagination>
        </div>
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
        <el-form :model="currentLeaveType" label-width="120px">
            <el-form-item label="请假类型名称">
                <el-input v-model="currentLeaveType.typeName"></el-input>
            </el-form-item>
            <el-form-item label="请假类型描述">
                <el-input type="textarea" v-model="currentLeaveType.description"></el-input>
            </el-form-item>
            <el-form-item label="适用条件">
                <el-input type="textarea" v-model="currentLeaveType.applicableConditions"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small" icon="el-icon-close">取 消</el-button>
            <el-button type="primary" @click="saveLeaveType" size="small" icon="el-icon-check">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                leaveTypes: [],
                currentPage: 1,
                pageSize: 10,
                totalLeaveTypes: 0,
                dialogVisible: false,
                dialogTitle: '添加请假类型',
                currentLeaveType: {
                    id: null,
                    typeName: '',
                    description: '',
                    applicableConditions: ''
                },
                searchTypeName: '',
                selectedLeaveTypes: []
            }
        },
        mounted() {
            this.fetchLeaveTypes();
        },
        methods: {
            fetchLeaveTypes() {
                const params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    typeName: this.searchTypeName
                };
                axiosWrapper.post('/api/leaveTypes/page', params)
                    .then(response => {
                        this.leaveTypes = response.data.list;
                        this.totalLeaveTypes = response.data.total;
                    })
                    .catch(error => {
                        console.error('Error fetching leave types:', error);
                        this.$message.error('获取请假类型列表失败');
                    });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.fetchLeaveTypes();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.fetchLeaveTypes();
            },
            handleSearch() {
                this.currentPage = 1;
                this.fetchLeaveTypes();
            },
            resetSearch() {
                this.searchTypeName = '';
                this.currentPage = 1;
                this.fetchLeaveTypes();
            },
            openAddLeaveTypeDialog() {
                this.dialogTitle = '添加请假类型';
                this.currentLeaveType = {
                    id: null,
                    typeName: '',
                    description: '',
                    applicableConditions: ''
                };
                this.dialogVisible = true;
            },
            openEditLeaveTypeDialog(leaveType) {
                this.dialogTitle = '编辑请假类型';
                this.currentLeaveType = {...leaveType};
                this.dialogVisible = true;
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该请假类型, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axiosWrapper.delete(`/api/leaveTypes/${row.id}`)
                        .then(() => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.fetchLeaveTypes();
                        })
                        .catch(error => {
                            console.error('Error deleting leave type:', error);
                            this.$message.error('删除请假类型失败');
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            saveLeaveType() {
                axiosWrapper.post('/api/leaveTypes/saveOrUpdate', this.currentLeaveType)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '请假类型保存成功!'
                        });
                        this.dialogVisible = false;
                        this.fetchLeaveTypes();
                    })
                    .catch(error => {
                        console.error('Error saving leave type:', error);
                        this.$message.error('保存请假类型失败');
                    });
            },
            handleSelectionChange(val) {
                this.selectedLeaveTypes = val;
            },
            handleBatchDelete() {
                if (this.selectedLeaveTypes.length === 0) {
                    this.$message.warning('请选择要删除的请假类型');
                    return;
                }
                this.$confirm(`此操作将永久删除选中的 ${this.selectedLeaveTypes.length} 个请假类型, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const ids = this.selectedLeaveTypes.map(leaveType => leaveType.id);
                    axiosWrapper.delete('/api/leaveTypes/batch', {data: ids})
                        .then(() => {
                            this.$message({
                                type: 'success',
                                message: '批量删除成功!'
                            });
                            this.fetchLeaveTypes();
                        })
                        .catch(error => {
                            console.error('Error batch deleting leave types:', error);
                            this.$message.error('批量删除请假类型失败');
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    });
</script>
</body>
</html>